<template>
    <div class="header">
        <div class="header__icon iconfont" @click="handleBackClick">&#xe60e;</div>
        <div class="header__tlite">编辑收货地址</div>
        <div class="header__new" @click="handleSave">保存</div>
    </div>
    <div class="main">
        <div class="main__inputBox">
        <div class="main__inputBox__inputItem">
          <div class="main__inputBox__inputItem__tlite">所在城市：</div>
          <input
          type="text"
          class="main__inputBox__inputItem__input"
          :placeholder="'如北京市'"
          v-model="dataObj.city"
          />
        </div>
        <div class="main__inputBox__inputItem">
          <div class="main__inputBox__inputItem__tlite">小区/大厦/学校：</div>
          <input
          type="text"
          class="main__inputBox__inputItem__input"
          :placeholder="'如理工大学国防科技园'"
          v-model="dataObj.department"
          >
        </div>
        <div class="main__inputBox__inputItem">
          <div class="main__inputBox__inputItem__tlite">楼号-门牌号：</div>
          <input type="text"
          class="main__inputBox__inputItem__input"
          :placeholder="'A号楼B层'"
          v-model="dataObj.houseNumber"
          >
        </div>
        <div class="main__inputBox__inputItem">
          <div class="main__inputBox__inputItem__tlite">收货人：</div>
          <input
          type="text"
          class="main__inputBox__inputItem__input"
          :placeholder="'请填写收货人的姓名'"
          v-model="dataObj.name"
          >
        </div>
        <div class="main__inputBox__inputItem">
          <div class="main__inputBox__inputItem__tlite">联系电话：</div>
          <input
          type="text"
          class="main__inputBox__inputItem__input"
          :placeholder="'请填写收货手机号'"
          v-model="dataObj.phone"
          >
        </div>
      </div>
    </div>
    <div class="hint" v-if="isHint">{{isHintText}}</div>
</template>

<script>
import '../style/siteStyle.scss'

import { get, post } from '../../../utils/axiosPost'
import { useRoute, useRouter } from 'vue-router'
import { toRefs, reactive, ref, computed } from 'vue'

// 编辑地址渲染逻辑
const dataget = async (id) => {
  const result = await get(`/api/user/address/${id}`)
  const { city, department, houseNumber, name, phone } = result
  const addressData = { city, department, houseNumber, name, phone }

  return addressData
}

// 表单保存逻辑
const saveFn = (id, dataObj) => {
  const isHint = ref(false) // 提示信息逻辑
  const isHintText = ref('')// 提示信息文字
  // 保存按钮发送表单数据
  const handleSave = () => {
    // 保存 更新数据库地址
    const result = post(`/api/user/address/${id}`, dataObj.dataObj)
    result.then(res => {
      if (res.errno === 0) {
        isHint.value = true
        isHintText.value = '收货地址修改成功'
        setTimeout(() => {
          isHint.value = false
          isHintText.value = ''
        }, 2000)
      } else {
        isHint.value = true
        isHintText.value = '修改出错'
        setTimeout(() => {
          isHint.value = false
          isHintText.value = ''
        }, 2000)
      }
    }).catch(e => {
      console.log(e)
    })
  }

  const router = useRouter()
  const handleBackClick = () => {
    router.back()
  }

  return { handleSave, isHint, isHintText, handleBackClick }
}
export default {
  name: 'CompileSite',
  setup () {
    const route = useRoute()
    const id = route.params.id
    const addressObj = reactive({ dataObj: {} })

    // 请求收货地址
    dataget(id).then(res => {
      addressObj.dataObj = res
    })
    // 动态获取input value 然后传进下方函数
    const addressList = computed(() => {
      const obj = addressObj

      return obj
    })

    // 表单的保存
    const { handleSave, isHint, isHintText, handleBackClick } = saveFn(id, addressList.value)

    const { dataObj } = toRefs(addressObj)

    return { dataObj, handleBackClick, handleSave, isHint, isHintText }
  }
}
</script>

<style scoped lang="scss">
@import '../../../style/mixinApi.scss';
.hint {
  @include MessCenterFn()
}
</style>
